<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.css">
    <link rel="stylesheet" href="./layui/css/layui.css">
    <title>注册页</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            text-decoration: none;
            list-style: none;
            box-sizing: border-box;
        }
        body{
            background-color: #f8f8f8;
        }
        .clearfix::after{
            content: "";
            display: block;
            clear: both;
        }
        /* 定宽居中 */
        .content{
            width: 1200px;
            margin: 0 auto;
        }
        #top{
            width: 100%;
            height: 29px;
            line-height: 29px;
            border-bottom: 1px solid #e8e8e8;
            background-color: #f1f1f1;
            font-size: 12px;
            color: #525252;
        }
        
        #top a{
            text-decoration: none !important;
        }
        #top .flex{
            display: flex;
            margin: 0;
        }
        #top .top_lt{
            float: left;
        }
        #top .top_rt{
            float: right;
        }
        #top ul li a{
            color: #525252;
            padding: 0 13px;
            border-right: 1px solid #d9d9d9;
        }
        #top ul li a span{
            font-size: 12px;
            color: #dc2a49;
        }
        #top ul li a i{
            font-size: 12px;
            color: #A1A0A7;
        }
        #top ul li a:hover{
            color: #f60;
        }
        #top .top_lt .phone_down{
            width: 150px;
            height: 358px;
            border: 1px solid #e0e0e0;
            border-top: none;
            background-color: #fff;
            position: absolute;
            top: 29px;
            left: 0;
            font-size: 16px;
            display: none;
        }
        #top .top_lt .phone_down ul li{
            border-bottom: 1px solid #e0e0e0;
            padding: 16px 14px;
            text-align: center;
            color: #666;
            line-height: 24px;
            float: none;
        }
        #top .top_lt .phone_down ul li img{
            width: 122px;
            height: 122px;
        }
        #top .top_lt .flex li:nth-of-type(1):hover,#top .top_rt .flex li:not(.ye):hover{
            background-color: #fff;
            border-left: 1px solid #d9d9d9;
            border-right: 1px solid #d9d9d9;
        }
        #top .top_lt .flex li:nth-of-type(1):hover a{
            color: #f60;
            cursor: pointer;
        }
        #top .top_lt .flex li:hover .phone_down,#top .top_rt .flex li:hover .shou_down{
            display: block;
        }
        #top .top_lt .flex li:hover .layui-icon-down,#top .top_rt .flex li:hover .layui-icon-down{
            display: inline-block;
            transform: rotate(180deg);
            transition: all 0.5s;
        }
        #top .top_rt ul li{
            position: relative;
        }
        #top .top_rt .shou_down{
            width: 77px;
            height: 60px;
            border: 1px solid #e0e0e0;
            background-color: #fff;
            position: absolute;
            top: 29px;
            left: 0;
            display: none;
            z-index: 99;
        }
        #top .top_rt .shou_down p{
            text-align: center;
            line-height: 30px;
        }
        #top .top_rt .shou_down p:hover{
            color: #f60;
            cursor: pointer;
        }
        #head{
            width: 100%;
            min-width: 1200px;
            height: 130px;
            background-color: #fff;
            padding: 30px 0 20px;
        }
        .head_lt{
            width: 208px;
            height: 80px;
            float: left;
            background-image: url("./images/logo.png");
            background-size: 100% 100%;
        }
        .headlt_zi{
            height: 30px;
            line-height: 30px;
            float: left;
            padding: 25px 0 25px 30px;
            font-size: 21px;
        }
        .head_rt{
            float: right;
            padding: 12px 0 18px 50px;
            line-height: 25px;
            position: relative;
        }
        .head_rt span{
            display: inline-block;
            font-size: 30px;
            border: 2px solid #a9a9a9;
            border-radius: 50%;
            padding: 10px;
            color: #a9a9a9;
            display: inline-block;
            position: absolute;
            top: 13px;
            left: 0;
        }
        .head_rt p{
            font-size: 14px;
            color: #666;
            text-align: left;
            margin-left: 10px;
        }
        .head_rt .dian_hua{
            font-size: 26px;
            color: #e02445;
            margin-left: 10px;
        }
        #yan{
            width: 1110px;
            height: 90px;
            padding-top: 60px;
            margin: 0 auto;
        }
        #yan dl{
            width: 100%;
            height: 30px;
        }
        #yan dl dd{
            width: 370px;
            line-height: 30px;
            float: left;
            text-align: center;
        }
        #yan .tiao{
            width: 100%;
            height: 20px;
            margin: 20px auto;
            background-image: url("./images/rg_line.png");
        }
        .form{
            width: 1000px;
            height: 500px;
            margin: 100px auto;
            padding-top: 20px;
            font-size: 14px;
            background-color: white;
        }
        .form .form_dl{
            width: 745px;
            height: 80px;
            margin: 20px auto;
        }
        .form .form_dl .form_dd{
            width: 219px;
            height: 40px;
            text-align: right;
            color: #4d4d4d;
            line-height: 40px;
            float: left;
            margin-right: 11px;
        }
        .form .form_dl .form_input input{
            width: 268px;
            height: 40px;
            background-color: white;
            border-radius: 2px;
            border: 1px solid #e5e6e7;
            padding: 0 10px;
        }
        .form .tiao_yue{
            width: 500px;
            height: 40px;
            font-size: 12px;
            margin: 0 auto;
            padding: 0 10px;
            text-align: center;
            line-height: 40px;
            margin-bottom: 20px;
        }
        .form .tiao_yue span{
            margin-right: 6px;
        }
        .form .next{
            width: 230px;
            height: 45px;
            margin: 30px auto;
        }
        .form .next input{
            width: 230px;
            height: 45px;
            background-color: #999;
            color: white;
            text-align: center;
            border: none;
        }
        #footer{
            width: 100%;
            height: 210px;
            background-color: #1b1b1b;
            padding: 30px 0;
        }
        #footer .foot_nav{
            width: 1000px;
            height: 136px;
            margin: 0 auto;
        }
        #footer .foot_nav ul,#footer .foot_nav p{
            width: 100%;
            height: 30px;
            color: #575757;
            text-align: center;
            line-height: 30px;
            font-size: 13px;
        }
        #footer .foot_nav ul li{
            display: inline-block;
        }
        #footer .foot_nav ul li a,#footer .foot_nav p a{ 
            padding: 0 15px;
            color: #575757;
            text-decoration: none;
            line-height: 30px;
        }
        #footer .foot_nav ul li a:hover,#footer .foot_nav p a:hover{
            color: #9f9f9f;
        }
        #footer .foot_nav p a span{
            background-image: url("./images/sprite_global.png");
            background-position: 0 0;
            display: inline-block;
            width: 18px;
            height: 18px;
        }
        #footer .foot_nav .tu{
            width: 600px;
            height: 30px;
            margin: 0 auto;
            margin-top: 20px;
        }
        #footer .foot_nav .tu ul{
            display: flex;
            justify-content: space-between;
        }
        #footer .foot_nav .tu ul li{
            width: 87px;
            height: 30px;
        }
        #footer .foot_nav .tu ul li div{
            width: 100%;
            height: 100%;
            background-image: url("./images/copyright.png");
            opacity: 0.5;
        }
        #footer .foot_nav .tu ul li:hover div{
            opacity: 1;
        }
        #cebian{
            width: 140px;
            height: 50px;
            border-radius: 5px;
            background-image: url("images/iconWord0.png");
            background-size: 100% 100%;
            background-color: #00aef3;
            position: fixed;
            top: calc(50% - 25px);
            right: 10px;
        }
        #cebian:hover{
            cursor: pointer;
        }
    </style>
</head>
<body>
    <!-- 公共头部 -->
    <div id="top">
        <div class="content clearfix">
            <div class="top_lt">
                <ul class="flex">
                    <li style="position: relative;">
                        <a href="#"><span class="glyphicon glyphicon-phone"></span>手机站<i class="layui-icon layui-icon-down"></i></a>
                        <div class="phone_down">
                            <ul>
                                <li>
                                    <img src="./images/oneCode.jpg" alt="">
                                    手机站
                                </li>
                                <li style="border: none;">
                                    <img src="./images/xiaochengxu.jpg" alt="">
                                    小程序
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li  style="margin-left: 13px;">欢迎来到企汇网</li>
                    <li>
                        <a href="#"><span class="layui-icon layui-icon-friends"></span>登录</a>
                    </li>
                    <li><a href="#">免费注册</a></li>
                </ul>
            </div>
            <div class="top_rt">
                <ul class="flex">
                    <li class="ye"><a href="#">企汇网首页</a></li>
                    <li>
                        <a href="#">收藏夹<i class="layui-icon layui-icon-down"></i></a>
                        <div class="shou_down">
                            <p>收藏的产品</p>
                            <p>收藏的店铺</p>
                        </div>
                    </li>
                    <li>
                        <a href="#">我是采购商<i class="layui-icon layui-icon-down"></i></a>
                        <div class="shou_down" style="width: 98px;height: 90px;">
                            <p>采购商中心</p>
                            <p>发布采购单</p>
                            <p>采购管理</p>
                        </div>
                    </li>
                    <li>
                        <a href="#">我是供应商<i class="layui-icon layui-icon-down"></i></a>
                        <div class="shou_down" style="width: 98px;height: 120px;">
                            <p>供应商中心</p>
                            <p>发布产品</p>
                            <p>产品管理</p>
                            <p>店铺管理</p>
                        </div>
                    </li>
                    <li class="ye"><a href="#">企汇管家</a></li>
                    <li>
                        <a href="#">企汇服务<i class="layui-icon layui-icon-down"></i></a>
                        <div class="shou_down" style="width: 208px;height: 154px;padding: 0 15px;">
                            <p style="font-weight: bold;text-align: left;">热门服务</p>
                            <p style="display: inline-block;width: 86px;height: 20px;line-height: 20px;text-align: left;">标王</p>
                            <p style="display: inline-block;width: 86px;height: 20px;line-height: 20px;text-align: left;">黄金展位</p>
                            <p style="display: inline-block;width: 86px;height: 20px;line-height: 20px;text-align: left;">热门推荐广告位</p>
                            <p style="display: inline-block;width: 86px;height: 20px;line-height: 20px;text-align: left;">图片空间</p>
                            <p style="display: inline-block;width: 86px;height: 20px;line-height: 20px;text-align: left;">信息包</p>
                            <p style="display: inline-block;width: 86px;height: 20px;line-height: 20px;text-align: left;">企汇金铺</p>
                            <p style="display: inline-block;width: 86px;height: 20px;line-height: 20px;text-align: left;">金铺装修</p>
                            <p style="display: inline-block;width: 86px;height: 20px;line-height: 20px;text-align: left;">更多服</p>
                        </div>
                    </li>
                    <li>
                        <a href="#">客服中心<i class="layui-icon layui-icon-down"></i></a>
                        <div class="shou_down" style="width: 87px;">
                            <p>常见问题</p>
                            <p>在线客服</p>
                        </div>
                    </li>
                    <li>
                        <a href="#"><span class="glyphicon glyphicon-th-large"></span>网站导航<i class="layui-icon layui-icon-down"></i></a>
                        <div class="shou_down" style="width: 308px;height: 271px;padding: 0 15px;left: -80px;">
                            <p style="font-weight: bold;text-align: left;">特色服务</p>
                            <p style="display: inline-block;width: 66px;height: 20px;line-height: 20px;text-align: left;">首页</p>
                            <p style="display: inline-block;width: 66px;height: 20px;line-height: 20px;text-align: left;">企汇管家</p>
                            <p style="display: inline-block;width: 66px;height: 20px;line-height: 20px;text-align: left;">企汇云信</p>
                            <p style="display: inline-block;width: 66px;height: 20px;line-height: 20px;text-align: left;">企业库</p>
                            <p style="display: inline-block;width: 66px;height: 20px;line-height: 20px;text-align: left;">产品库</p>
                            <p style="display: inline-block;width: 66px;height: 20px;line-height: 20px;text-align: left;">手机站</p>
                            <p style="display: inline-block;width: 66px;height: 20px;line-height: 20px;text-align: left;">搜索</p>
                            <p style="display: inline-block;width: 66px;height: 20px;line-height: 20px;text-align: left;">企汇软文通</p>
                            <p style="display: inline-block;width: 66px;height: 20px;line-height: 20px;text-align: left;">百度爱采购</p>
                            <p style="display: inline-block;width: 66px;height: 20px;line-height: 20px;text-align: left;">企业直通车</p>
                            <div style="width:100%;height:72px;padding:10px 0;border-top:1px dashed #e0e0e0;border-bottom:1px dashed #e0e0e0;">
                                <p style="font-weight: bold;text-align: left;">采购服务</p>
                                <p style="display: inline-block;width: 66px;height: 20px;line-height: 20px;text-align: left;">采购中心</p>
                                <p style="display: inline-block;width: 66px;height: 20px;line-height: 20px;text-align: left;">发布采购单</p>
                            </div>
                            <p style="font-weight: bold;text-align: left;">行业市场</p>
                            <p style="display: inline-block;width: 66px;height: 20px;line-height: 20px;text-align: left;">建材频道</p>
                            <p style="display: inline-block;width: 66px;height: 20px;line-height: 20px;text-align: left;">机械频道</p>
                            <p style="display: inline-block;width: 66px;height: 20px;line-height: 20px;text-align: left;">农林频道</p>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!-- 头部logo -->
    <div id="head">
        <div class="content clearfix">
            <div class="head_lt"></div>
            <div class="headlt_zi">会员注册</div>
            <div class="head_rt">
                <span class="glyphicon glyphicon-earphone"></span>
                <p>客服电话</p>
                <p class="dian_hua">400-6677-369</p>
            </div>
        </div>
    </div>
    <!-- 进度条 -->
    <div id="yan">
        <dl class="clearfix">
            <dd style="color: #e02445;">验证手机号</dd>
            <dd>填写账号信息</dd>
            <dd>注册成功</dd>
        </dl>
        <div class="tiao"></div>
    </div>
    <!-- 表单 -->
    <form action="#">
        <div class="form">
            <dl class="form_dl clearfix">
                <dd class="form_dd">
                    <span style="color: #e02445;">*</span>
                    请输入手机号
                </dd>
                <dd class="form_input" style="float: left;">
                   <input type="text" placeholder="请输入手机号码">
                </dd>
            </dl>
            <dl class="form_dl clearfix">
                <dd class="form_dd">
                    <span style="color: #e02445;">*</span>
                    验证码
                </dd>
                <dd class="form_input" style="float: left;">
                   <input type="button" value="点击按钮进行验证" style="background-color: #e8e8e8;">
                </dd>
            </dl>
            <dl class="form_dl clearfix">
                <dd class="form_dd">
                    <span style="color: #e02445;">*</span>
                    短信验证码
                </dd>
                <dd class="form_input" style="float: left;">
                   <input type="text" placeholder="请输入验证码" style="width: 162px;margin-right: 11px;">
                   <input type="button" value="获取短信验证码" style="width: 120px;background-color: #a9a9a9;color: white;">
                </dd>
            </dl>
            <div class="tiao_yue">
                <input type="checkbox" style="transform: translateY(2px);">
                <span>我已阅读并同意</span>
                <a href="#"><span style="margin-right: 0;color: #dc2a49;">《企汇网服务条款》</span></a>
            </div>
            <hr>
            <div class="next">
                <input type="button" value="下一步">
            </div>
        </div>
    </form>
    <!-- 注册页底部 -->
    <div id="footer">
        <div class="foot_nav">
            <ul>
                <li><a href="#">网站首页</a></li>| 
                <li><a href="#">关于我们</a></li>| 
                <li><a href="#">联系我们</a></li>| 
                <li><a href="#">使用协议</a></li>| 
                <li><a href="#">版权隐私</a></li>| 
                <li><a href="#">维权通道</a></li>| 
                <li><a href="#">网站导航</a></li>| 
                <li><a href="#">用户反馈</a></li>
            </ul>
            <p>
                <span>客服咨询热线：400-6677-369(免长途费) 工作时间：900-18:00(周一至周五)</span>
                <a href="#">在线客服：<span></span></a>
                <a href="#">关注我们：<span style="background-position: 0 -18px;"></span></a>
            </p>
            <p>
                <span>版权所有2009-2021  河南企汇网信息技术股份有限公司  保留所有权利</span>
                <span style="color: #9f9f9f;">经营许可证编号：</span>
                <a href="#">豫B2-20140075</a>
                <span> 豫公网安备 41019702002055号</span>
            </p>
            <div class="tu">
                <ul>
                    <li>
                        <div style="background-position: 0 0;"></div>
                    </li>
                    <li>
                        <div style="background-position: -92px 0;"></div>
                    </li>
                    <li>
                        <div style="background-position: -183px 0;"></div>
                    </li>
                    <li style="width: 107px;">
                        <div style="background-position: -274px 0;width: 107px;"></div>
                    </li>
                    <li style="width: 88px;">
                        <div style="background-position: -385px 0;width: 88px;"></div>
                    </li>
                    <li style="width: 92px;">
                        <div style="background-position: -477px 0;width: 92px;"></div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div id="cebian"></div>
</body>
</html>






